import { Button, Flex, Image, List } from "antd";
import { memo, useState } from "react";
import title_img from "../../assets/img/logo.png";
import "./learn_rout_page.css";

const LearnRoutPage = () => {
  const [listData, setListData] = useState(["1111", "22222"]);

  return (
    <Flex vertical>
      <Flex className="top_div">
        <List
          className="left_div"
          dataSource={listData}
          renderItem={(item) => (
            <List.Item>
              <ListItem item={item} />
            </List.Item>
          )}
        />

        <Flex className="right_div" vertical>
          <div>top </div>
          <div> bottom</div>
        </Flex>
      </Flex>
      <div className="bottom_div">
        ©2020 · wanandroid.com · All Rights Reserved. 皖ICP备17022096号 关于我们
      </div>
    </Flex>
  );
};

export default memo(LearnRoutPage);

const ListItem = memo((props: any) => {
  const { item } = props;

  const onClick = () => {
    console.log("item click", item);
  };

  return (
    <Flex style={{ width: "100%" }}>
      <Image className="list_item_img" src={title_img} onClick={onClick} />
      <Flex className="list_item_content">
        <Flex className="list_content_left" vertical>
          <div className="list_item_title" onClick={onClick}>
            title
          </div>
          <div>content</div>
        </Flex>
        <div className="list_content_right">
          <Button
            style={{
              backgroundColor: "rgb(41, 41, 143)",
              marginBottom: "10px",
            }}
          >
            关注
          </Button>
          <div>关注人数</div>
        </div>
      </Flex>
    </Flex>
  );
});
